<template>
  <view v-show="showRule">
    <view class="mask" @click="close"></view>
    <view class="ruleWrap">
      <view class="title">
        <text>签到规则</text>
        <text class="iconfont icon-iconclose" @click="close" style="font-size:24rpx"></text>
      </view>
      <view class="content">
        <view class="days">
          <text>连续签到天数</text>
          <text v-for="item in tableData" :key="item.day">{{item.day}}</text>
        </view>
        <view class="favs">
          <text>可获得积分</text>
          <text v-for="item in tableData" :key="item.fav">{{item.fav}}</text>
        </view>
      </view>
      <view class="info">
        <text>中间若有间隔，则连续签到天数从零计算;</text>
        <text>(不可复用程序自动签到，否则社区积分清零!)</text>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data () {
    return {
      tableData: [
        {
          day: '<5',
          fav: 5
        },
        {
          day: '≥5',
          fav: 10
        },
        {
          day: '≥15',
          fav: 15
        },
        {
          day: '≥30',
          fav: 30
        },
        {
          day: '≥100',
          fav: 50
        }
      ]
    }
  },
  props: {
    showRule: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close () {
      this.$emit('closeRule', false)
    }
  }

}
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  z-index: 1;
}
.ruleWrap {
  width: 600rpx;
  height: 800rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -400rpx;
  margin-left: -300rpx;
  background-color: #10d8c4;
  border-radius: 20rpx;
  z-index: 2;
  .title {
    height: 80rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(233, 233, 233);
    background-color: #0cae9e;
    border-radius: 20rpx 20rpx 0 0;
    font-weight: bold;
  }
  .content {
    height: auto;
    display: flex;
    .days,
    .favs {
      width: 50%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      text {
        height: 80rpx;
        line-height: 80rpx;
        width: 100%;
        text-align: center;
        font-size: 24rpx;
        color: #f1df79;
        font-weight: bold;
        &:nth-of-type(even) {
          background-color: #16c3b2;
        }
      }
    }
    .days {
      border-right: 1rpx dotted #c7ebe7;
    }
  }
  .info {
    margin-top: 40rpx;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 24rpx;
    text {
      color: #0e796e;
      line-height: 60rpx;
      &:last-child {
        color: #ee2e0c;
      }
    }
  }
}
</style>